<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入依赖包 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 600px;
            height: 400px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="box">
    </div>
</body>

</html>
<script>
    //创建echarts实例
    let mycharts = echarts.init(document.querySelector('.box'));
    //通过echarts方法setOption方法设置配置项
    let option = {

        dataZoom:{},
        //标题组件
        title: {
            text: "柱状图"
        },
        xAxis: {
            //在x轴上均匀分布
            type: 'category'
        },
        yAxis: {
            show: true
        },
        series: [
            {
                name: '军火',
                type: 'bar',//柱状图
                data: [10, 20, 30, 40, 50]
            },
            {
                name: '娱乐',
                type: 'line',//柱状图
                data: [10, 20, 15, 40, 50]
            },
            {
                name: '直播',
                type: 'bar',//柱状图
                data: [10, 20, 30, 40, 50]
            },
        ],
        //提示框组件
        tooltip: {
            trigger: 'axis',//触发类型
            confine: true,//让提示框在容器里面展示
            axisPointer: {//坐标轴指示器配置项
                type: 'cross',
                lineStyle: {
                    color: 'red'
                }
            }
        },
        //grid组件:调整图形图标在容器里面布局
        grid: {
            show: true,
            left: 0,
            right: 0,
            bottom: 50,
            top: 80,
            backgroundColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'red' // 0% 处的颜色
                }, {
                    offset: 1, color: 'green' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
        },
        //图例组件
        legend: {
            // orient: 'vertical',
            right:300
        },
          //工具栏组件
       toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: "none"
                },
                dataView: {
                    readOnly: false
                },
                magicType: {
                    type: ["line", "bar"]
                },
                restore: {},
                saveAsImage: {}
            }
        },
    
    
    
       
    };
    //设置配置项
    mycharts.setOption(option);
</script>